function Slider(sliderName, parmeObj = {}) {
    this.sliderBox = document.querySelector(sliderName);
    this.sliderBoxPic = this.sliderBox.firstElementChild;
    this.sliderBoxBtn = this.sliderBox.firstElementChild.nextElementSibling;
    this.sliderBoxPointer = this.sliderBox.lastElementChild.firstElementChild;
    this.prevBtn = this.sliderBoxBtn.firstElementChild;
    this.nextBtn = this.sliderBoxBtn.lastElementChild;

    this.picArrays = this.sliderBoxPic.children;
    this.pointerArrays = this.sliderBoxPointer.children;
    this.sliderWidth = this.sliderBox.clientWidth; // 相框宽度
    this.count = this.sliderBoxPic.children.length; // 元素个数，相片个数
    this.isAnimate = false; //动画开关
    this.currentIndex = 0; //当前指示器序号 [0-n）
    this.autoPlay = parmeObj.autoPlay || false; // 自动轮播
    this.interval = parmeObj.interval || 2000; //自动轮播间隔时间
    this.timer = parmeObj.timer || 500; // 移动整张图片时间

    this.mouseIndex = -1;

    this.init();
}

Slider.prototype = {
    constructor: Slider,
    init: function () {
        this.copePic();
        this.initCursorPointer();
        this.prev();
        this.next();
        this.cursorPointer();
        this.pauseSlider();
        this.startIntever();
    },

    /**
    * 无缝轮播，初始化图片
    */
    copePic: function () {
        let nextEle = this.sliderBoxPic.firstElementChild.cloneNode(true);
        let prevEle = this.sliderBoxPic.lastElementChild.cloneNode(true);
        this.sliderBoxPic.appendChild(nextEle);
        this.sliderBoxPic.insertBefore(prevEle, this.sliderBoxPic.firstElementChild);

        this.count = this.sliderBoxPic.children.length; // 元素个数，相片个数
        this.sliderBoxPic.style.width = this.count * 100 + '%';
        this.sliderBoxPic.style.left = -1 * this.sliderWidth + 'px';
    },

    /**
    * 动态添加指示器
    */
    initCursorPointer: function () {
        for (let i = 0; i < this.count - 2; i++) {
            let liEle = document.createElement('li');
            let aEle = document.createElement('a');
            aEle.setAttribute('href', '#');
            aEle.setAttribute('date-index', i);
            liEle.appendChild(aEle);
            this.sliderBoxPointer.appendChild(liEle);
        }
        // 默认第一张选中状态
        this.pointerArrays = this.sliderBoxPointer.children;
        this.pointerArrays[this.currentIndex].firstElementChild.className = 'active';
    },

    /**
    * 指示器动画
    * @param {*} offset 
    */
    move: function (offset) {
        this.animate(offset);

        for (let i = 0; i < this.pointerArrays.length; i++) {
            //清除选中状态
            this.pointerArrays[i].firstElementChild.className = '';
        }
        this.pointerArrays[this.currentIndex].firstElementChild.className = 'active';
    },
    /**
     * 移动一张图片动画效果
     * offset 移动一次偏移量，也就是一张图片宽度
     * 负数表示左移
     * 正数表示右移
     */
    animate: function (offset) {
        //恢复隐藏
        for (let index = 0; index < this.picArrays.length; index++) {
            const element = this.picArrays[index];
            if(element.firstElementChild.firstElementChild){
                element.firstElementChild.firstElementChild.style.opacity = '0'
                element.firstElementChild.firstElementChild.nextElementSibling.style.opacity = '0'
            }
          
        }

        this.isAnimate = true; // 动画开始
        let timer = this.timer; // 移动整张图片时间
        let rate = 100; // 移动速度
        let dist = offset * (rate / timer); // 移动一次距离

        //图片移动的目标位置
        let goal = parseFloat(this.sliderBoxPic.style.left) + offset; // -600px

        let aniateInterve = setInterval(() => {
            //判断整张图片是否移动完成
            if (goal == parseFloat(this.sliderBoxPic.style.left) || Math.abs(Math.abs(goal) - Math.abs(parseFloat(this.sliderBoxPic.style.left))) < Math.abs(dist)) {
                this.sliderBoxPic.style.left = goal;
                //无缝轮播实现
                //下一张无缝实现
                if (parseFloat(this.sliderBoxPic.style.left) == 0) {
                    this.sliderBoxPic.style.left = -this.sliderWidth * (this.count - 2) + 'px';
                } else if (parseFloat(this.sliderBoxPic.style.left) == (-this.sliderWidth * (this.count - 1))) {
                    this.sliderBoxPic.style.left = -this.sliderWidth + 'px';
                }
                clearInterval(aniateInterve);
                this.isAnimate = false; // 动画结束

                if (this.currentIndex == 0) {
                    this.picArrays[1].firstElementChild.firstElementChild.animate([{ top: '10%', opacity: 0 }, { top: '40%', opacity: 1 }], { duration: 300 })
                    this.picArrays[1].firstElementChild.firstElementChild.nextElementSibling.animate([{ top: '90%', opacity: 0 }, { top: '60%', opacity: 1 }], { duration: 300 })
                    this.picArrays[1].firstElementChild.firstElementChild.style.opacity = '1';
                    this.picArrays[1].firstElementChild.firstElementChild.nextElementSibling.style.opacity = '1';
                }
                if (this.currentIndex == 1) {
                    this.picArrays[2].firstElementChild.firstElementChild.animate([{ left: '5%', opacity: 0 }, { left: '40%', opacity: 1 }], { duration: 300 })
                    this.picArrays[2].firstElementChild.firstElementChild.nextElementSibling.animate([{ left: '99%', opacity: 0 }, { left: '60%', opacity: 1 }], { duration: 300 })
                    this.picArrays[2].firstElementChild.firstElementChild.style.opacity = '1';
                    this.picArrays[2].firstElementChild.firstElementChild.nextElementSibling.style.opacity = '1';
                }


                if (this.currentIndex == 2) {
                    this.picArrays[3].firstElementChild.firstElementChild.animate([{ top: '10%', opacity: 0 }, { top: '40%', opacity: 1 }], { duration: 300 })
                    this.picArrays[3].firstElementChild.firstElementChild.nextElementSibling.animate([{ top: '90%', opacity: 0 }, { top: '60%', opacity: 1 }], { duration: 300 })
                    this.picArrays[3].firstElementChild.firstElementChild.style.opacity = '1';
                    this.picArrays[3].firstElementChild.firstElementChild.nextElementSibling.style.opacity = '1';
                }

                if (this.currentIndex == 3) {
                    this.picArrays[4].firstElementChild.firstElementChild.animate([{ left: '0', opacity: 0 }, { left: '40%', opacity: 1 }], { duration: 300 })
                    this.picArrays[4].firstElementChild.firstElementChild.nextElementSibling.animate([{ left: '100%', opacity: 0 }, { left: '60%', opacity: 1 }], { duration: 300 })
                    this.picArrays[4].firstElementChild.firstElementChild.style.opacity = '1';
                    this.picArrays[4].firstElementChild.firstElementChild.nextElementSibling.style.opacity = '1';
                }

            } else {
                // 移动图片
                this.sliderBoxPic.style.left = (parseFloat(this.sliderBoxPic.style.left) + dist) + 'px'
            }
        }, rate);

    },

    /**
    * 左移
    */
    prev: function () {
        this.prevBtn.addEventListener('click', () => {
            if (this.isAnimate == false) {
                //序号边界检查
                if (--this.currentIndex < 0) {
                    this.currentIndex = this.pointerArrays.length - 1;
                }
                this.move(this.sliderWidth);
            }

        })
    },

    /**
     * 右移
     */
    next: function () {
        this.nextBtn.addEventListener('click', () => {
            if (this.isAnimate == false) {
                //序号边界检查
                if (++this.currentIndex == this.pointerArrays.length) {
                    this.currentIndex = 0;
                }
                this.move(-this.sliderWidth);
            }
        })
    },

    /**
     * 指示器点击切换效果
     */
    cursorPointer: function () {
        this.sliderBoxPointer.addEventListener('click', () => {
            let e = event || window.event;
            let target = e.target || e.srcElement;
            if (target.nodeName == 'A' && this.isAnimate == false) {
                // 获取点击序号
                let pointerIndex = target.getAttribute('date-index');
                let offsetWidth = (pointerIndex - this.currentIndex) * -this.sliderWidth;
                this.currentIndex = pointerIndex;
                this.move(offsetWidth);
            }
        })
    },

    /**
     * 鼠标移入轮播暂停
     */
    pauseSlider: function () {
        let that = this;
        for (let index = 0; index < this.pointerArrays.length; index++) {
            const element = this.pointerArrays[index];
            element.addEventListener('mouseover', function () {
                that.mouseIndex = this.firstElementChild.getAttribute('date-index');
            })

            element.addEventListener('mouseout', () => {
                this.mouseIndex = -1;
            })
        }

    },

    /**
    * 启动自动轮播
    */
    startIntever: function () {
        if (this.autoPlay) {
            setInterval(() => {
                if (this.mouseIndex == this.currentIndex) {
                    return;
                }
                if (this.isAnimate == false && this.autoPlay == true) {
                    //序号边界检查
                    if (++this.currentIndex == this.pointerArrays.length) {
                        this.currentIndex = 0;
                    }
                    this.move(-this.sliderWidth);
                }
            }, this.interval);
        }
    }
}